<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>带有左侧菜单的网页布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

        header {
            background-color: #333;
            color: white;
            padding: 1rem;
            text-align: center;
        }

        .container {
            display: flex;
            flex: 1;
        }

        nav.sidebar {
            width: 250px;
            background-color: #444;
            color: white;
            padding: 1rem;
            height: 100%;
            position: fixed;
            left: 0;
            top: 0;
            bottom: 0;
        }

        main.content {
            margin-left: 250px; /* 确保内容区不会被侧边栏覆盖 */
            padding: 1rem;
            flex-grow: 1;
            background-color: #f9f9f9;
        }

        footer {
            background-color: #333;
            color: white;
            padding: 1rem;
            text-align: center;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            nav.sidebar {
                position: static;
                width: 100%;
                height: auto;
            }

            main.content {
                margin-left: 0;
            }
        }

        /* 样式美化 */
        nav.sidebar a {
            display: block;
            padding: 0.5rem;
            color: white;
            text-decoration: none;
        }

        nav.sidebar a:hover {
            background-color: #555;
        }

        /* 子菜单样式 */
        nav.sidebar ul ul {
            margin-left: 1rem;
            padding-left: 0.5rem;
            border-left: 2px solid #666;
            display: none; /* 默认隐藏 */
        }

        nav.sidebar ul li.open > ul {
            display: block; /* 展开时显示 */
        }

        /* 箭头样式 */
        .arrow {
            float: right;
            cursor: pointer;
            transition: transform 0.3s ease;
        }

        .open > .arrow {
            transform: rotate(90deg); /* 展开时箭头向右 */
        }
    </style>
</head>

<body>

<!-- 页面头部 -->
<header>
    <h1>我的个人网站</h1>
</header>

<!-- 导航菜单 -->
<nav class="sidebar">
    <h2>菜单</h2>
    <ul id="result"></ul>
</nav>

<!-- 内容容器 -->
<main class="content">
    <h2>欢迎来到主页</h2>
    <p>这是页面的主要内容区域。你可以在这里添加文章、图片或任何你想要展示的内容。</p>
</main>

<!-- 页面底部 -->
<footer>
    <p>&copy; 2025 我的网站 版权所有</p>
</footer>

<script>
    function createMenuItem(item) {
        const li = document.createElement('li');
        const a = document.createElement('a');
        a.href = 'javascript:void(0)'; // 防止默认跳转
        a.textContent = item.permissionName;
        if (item.permissionUrl) { // 如果有URL，则存储在data-url属性中
            a.dataset.url = item.permissionUrl;
        }
        li.appendChild(a);

        // 如果有子菜单，则添加箭头并绑定点击事件
        if (item.childrenList && item.childrenList.length > 0) {
            li.classList.add('has-children');

            const arrow = document.createElement('span');
            arrow.className = 'arrow';
            arrow.innerHTML = '▶';
            li.appendChild(arrow);

            const subMenu = document.createElement('ul');
            item.childrenList.forEach(child => {
                const childLi = createMenuItem(child);
                subMenu.appendChild(childLi);
            });
            li.appendChild(subMenu);

            // 点击展开/收起
            a.addEventListener('click', function(e) {
                e.preventDefault();
                li.classList.toggle('open');
            });
        } else if (item.permissionUrl) { // 如果没有子菜单但有URL，则绑定点击事件
            a.addEventListener('click', function(e) {
                e.preventDefault();
                loadContent(item.permissionUrl);
            });
        }

        return li;
    }

    function fetchData() {
        fetch('http://127.0.0.1:8101/sys/sysPermission/getAllMapList')
            .then(response => response.json())
            .then(data => {
                const menuContainer = document.getElementById('result');
                data.forEach(item => {
                    const menuItem = createMenuItem(item);
                    menuContainer.appendChild(menuItem);
                });
            })
            .catch(error => {
                console.error('请求失败:', error);
            });
    }

    function loadContent(url) {
        fetch(url)
            .then(response => response.text()) // 假设返回的是HTML片段
            .then(html => {
                document.querySelector('.content').innerHTML = html;
            })
            .catch(error => console.error('加载内容失败:', error));
    }

    document.addEventListener('DOMContentLoaded', fetchData);
</script>

</body>

</html>